<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.tabs{width:100%;margin: 0 auto;overflow: hidden;}
			.ul1{height: 60px;}
			.ul1 li{border:1px solid red;cursor: pointer;width: 80px;height: 40px;text-align: center;line-height: 60px;list-style-type: none;float: left;font-size: 12px;}
			.active{background:black;color:red;}
			.box{display: none;padding: 10px 30px;border-top: none;width: 265px;height: 200px;border: 1px solid red;}
			div.show{display: block;}
		</style>
	</head>
	<body>
		<div class="tabs" id="tabs">
			<ul class="ul1" id="ul1">
				<li class="active">选项卡1</li>
				<li>选项卡2</li>
				<li>选项卡3</li>
				<li>选项卡4</li>
				
			</ul>
			
			<div class="box show">
				<p>12345</p>
				
			</div>
			<div class="box">
				<p>23456</p>
				
			</div>
			<div class="box">
				<p>34567</p>
				
			</div>
			<div class="box">
				<p>78910</p>
				
			</div>
			
		</div>
	</body>
	
	
	<script type="text/javascript">
		window.onload = function()
		{
			new TabSwitch("tabs");
		};
		
		function TabSwitch(id)
		{
			var _this = this;
			var oTab = document.getElementById(id);
			var oUl1 = document.getElementById("ul1");
			
			this.aLi = oUl1.getElementsByTagName("li");
			this.aDiv = oTab.getElementsByTagName("div");

			for (var i =0;i<this.aLi.length;i++) 
			{
				this.aLi[i].index = i;
				this.aLi[i].onclick = function()
				{
					_this.fnClick(this);
				};
			}
		};
		
		TabSwitch.prototype.fnClick=function(aLi)
		{
			
			for (var i =0;i<this.aLi.length;i++) 
			{
				this.aLi[i].className = "";
				this.aDiv[i].className = "box";
			}
			aLi.className = "active";
			this.aDiv[aLi.index].className = "show box";
		};
		
		
		
	</script>
</html>
